﻿
@{
    ViewData["Title"] = "Toasts";
}



<!-- [ Main Content ] start -->
<div class="pcoded-main-container">
    <div class="pcoded-wrapper">
        <div class="pcoded-content">
            <div class="pcoded-inner-content">
                <!-- [ breadcrumb ] start -->
                <div class="page-header">
                    <div class="page-block">
                        <div class="row align-items-center">
                            <div class="col-md-12">
                                <div class="page-header-title">
                                    <h5 class="m-b-10">Toasts</h5>
                                </div>
                                <ul class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="/Dashboard/@Pages.Dashboard.Value"><i class="feather icon-home"></i></a></li>
                                    <li class="breadcrumb-item"><a href="#!">Basic Components</a></li>
                                    <li class="breadcrumb-item"><a href="#!">Toasts</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- [ breadcrumb ] end -->
                <div class="main-body">
                    <div class="page-wrapper">
                        <!-- [ Main Content ] start -->
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Toasts</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="bg-light p-4 mb-2" style="height:150px;">
                                            <div class="toast hide toast-1" role="alert" aria-live="assertive" aria-atomic="true">
                                                <div class="toast-header">
                                                    <img src="~/assets/images/favicon.ico" alt="" class="img-fluid mr-2">
                                                    <strong class="mr-auto">Bootstrap</strong>
                                                    <small>11 mins ago</small>
                                                    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                                                        <span>&times;</span>
                                                    </button>
                                                </div>
                                                <div class="toast-body">
                                                    Hello, world! This is a toast message.
                                                </div>
                                            </div>
                                        </div>
                                        <button class="btn btn-primary" onclick="$('.toast-1').toast('show')">click</button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Translucent</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="bg-dark p-4 mb-2" style="height:150px;">
                                            <div class="toast hide toast-2" role="alert" aria-live="assertive" aria-atomic="true">
                                                <div class="toast-header">
                                                    <img src="~/assets/images/favicon.ico" alt="" class="img-fluid mr-2">
                                                    <strong class="mr-auto">Bootstrap</strong>
                                                    <small class="text-muted">11 mins ago</small>
                                                    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                                                        <span>&times;</span>
                                                    </button>
                                                </div>
                                                <div class="toast-body">
                                                    Hello, world! This is a toast message.
                                                </div>
                                            </div>
                                        </div>
                                        <button class="btn btn-primary" onclick="$('.toast-2').toast('show')">click</button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Stacking</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="bg-light p-4 mb-2" style="height:250px;">
                                            <div class="toast hide toast-3" role="alert" aria-live="assertive" aria-atomic="true">
                                                <div class="toast-header">
                                                    <img src="~/assets/images/favicon.ico" alt="" class="img-fluid mr-2">
                                                    <strong class="mr-auto">Bootstrap</strong>
                                                    <small class="text-muted">11 mins ago</small>
                                                    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                                                        <span>&times;</span>
                                                    </button>
                                                </div>
                                                <div class="toast-body">
                                                    Hello, world! This is a toast message.
                                                </div>
                                            </div>
                                            <div class="toast hide toast-3" role="alert" aria-live="assertive" aria-atomic="true">
                                                <div class="toast-header">
                                                    <img src="~/assets/images/favicon.ico" alt="" class="img-fluid mr-2">
                                                    <strong class="mr-auto">Bootstrap</strong>
                                                    <small class="text-muted">11 mins ago</small>
                                                    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                                                        <span>&times;</span>
                                                    </button>
                                                </div>
                                                <div class="toast-body">
                                                    Hello, world! This is a toast message.
                                                </div>
                                            </div>
                                        </div>
                                        <button class="btn btn-primary" onclick="$('.toast-3').toast('show')">click</button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>data-delay</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="bg-light p-4 mb-2" style="height:250px;">
                                            <div class="toast hide toast-1s" role="alert" aria-live="assertive" data-delay="1000" aria-atomic="true">
                                                <div class="toast-header">
                                                    <img src="~/assets/images/favicon.ico" alt="" class="img-fluid mr-2">
                                                    <strong class="mr-auto">Bootstrap 1s</strong>
                                                    <small class="text-muted">11 mins ago</small>
                                                    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                                                        <span>&times;</span>
                                                    </button>
                                                </div>
                                                <div class="toast-body">
                                                    Hello, world! This is a toast message.
                                                </div>
                                            </div>
                                            <div class="toast hide toast-3s" role="alert" aria-live="assertive" data-delay="3000" aria-atomic="true">
                                                <div class="toast-header">
                                                    <img src="~/assets/images/favicon.ico" alt="" class="img-fluid mr-2">
                                                    <strong class="mr-auto">Bootstrap 3s</strong>
                                                    <small class="text-muted">11 mins ago</small>
                                                    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                                                        <span>&times;</span>
                                                    </button>
                                                </div>
                                                <div class="toast-body">
                                                    Hello, world! This is a toast message.
                                                </div>
                                            </div>
                                            <div class="toast hide toast-5s" role="alert" aria-live="assertive" data-delay="5000" aria-atomic="true">
                                                <div class="toast-header">
                                                    <img src="~/assets/images/favicon.ico" alt="" class="img-fluid mr-2">
                                                    <strong class="mr-auto">Bootstrap 5s</strong>
                                                    <small class="text-muted">11 mins ago</small>
                                                    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                                                        <span>&times;</span>
                                                    </button>
                                                </div>
                                                <div class="toast-body">
                                                    Hello, world! This is a toast message.
                                                </div>
                                            </div>
                                        </div>
                                        <button class="btn btn-primary" onclick="$('.toast-1s').toast('show')">1 sec</button>
                                        <button class="btn btn-primary" onclick="$('.toast-3s').toast('show')">3 sec</button>
                                        <button class="btn btn-primary" onclick="$('.toast-5s').toast('show')">5 sec</button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Placement</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="position-relative bg-light p-4 mb-2" style="height:300px;">
                                            <div style="position:absolute;top:40px;left:40px">
                                                <div class="toast hide toast-left" role="alert" aria-live="assertive" data-delay="3000" aria-atomic="true">
                                                    <div class="toast-header">
                                                        <img src="~/assets/images/favicon.ico" alt="" class="img-fluid mr-2">
                                                        <strong class="mr-auto">Bootstrap</strong>
                                                        <small class="text-muted">11 mins ago</small>
                                                        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                                                            <span>&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="toast-body">
                                                        Hello, world! This is a toast message.
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-center" style="position:absolute;top:40px;left:40px;right:40px">
                                                <div class="toast hide toast-center" role="alert" aria-live="assertive" data-delay="3000" aria-atomic="true">
                                                    <div class="toast-header">
                                                        <img src="~/assets/images/favicon.ico" alt="" class="img-fluid mr-2">
                                                        <strong class="mr-auto">Bootstrap</strong>
                                                        <small class="text-muted">11 mins ago</small>
                                                        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                                                            <span>&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="toast-body">
                                                        Hello, world! This is a toast message.
                                                    </div>
                                                </div>
                                            </div>
                                            <div style="position:absolute;top:40px;right: 40px">
                                                <div class="toast hide toast-right" role="alert" aria-live="assertive" data-delay="3000" aria-atomic="true">
                                                    <div class="toast-header">
                                                        <img src="~/assets/images/favicon.ico" alt="" class="img-fluid mr-2">
                                                        <strong class="mr-auto">Bootstrap</strong>
                                                        <small class="text-muted">11 mins ago</small>
                                                        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                                                            <span>&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="toast-body">
                                                        Hello, world! This is a toast message.
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-center align-items-center" style="min-height:100%;position:absolute;top:0px;right: 0px;left:0">
                                                <div class="toast hide toast-align-center" role="alert" aria-live="assertive" data-delay="3000" aria-atomic="true">
                                                    <div class="toast-header">
                                                        <img src="~/assets/images/favicon.ico" alt="" class="img-fluid mr-2">
                                                        <strong class="mr-auto">Bootstrap</strong>
                                                        <small class="text-muted">11 mins ago</small>
                                                        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                                                            <span>&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="toast-body">
                                                        Hello, world! This is a toast message.
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <button class="btn btn-primary" onclick="$('.toast-left').toast('show')">Left</button>
                                        <button class="btn btn-primary" onclick="$('.toast-center').toast('show')">Center</button>
                                        <button class="btn btn-primary" onclick="$('.toast-right').toast('show')">Right</button>
                                        <button class="btn btn-primary" onclick="$('.toast-align-center').toast('show')">Center Align</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- [ Main Content ] end -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- [ Main Content ] end -->


@section Styles{

}

@section Scripts{

}

